前面幾天的內容是在探討父元件和子元件間的資料傳遞，不過當根元件要傳遞到最底部的元件時，如果使用 props 一層一層傳遞，可能會影響到中間層元件造成額外的麻煩，因此透過使用 provide 和 inject 可以改善此問題。

provide 和 inject 函數 是什麼？

元件在跨層級的傳遞中，可以使用 provide( ) 函數來寫入要傳遞的資料，並使用 inject( ) 函數來注入資料到元件。

如何使用 provide( ) 函數？

在提供資料傳遞的元件中寫入 provide( ) 函數，其需要寫入兩個參數，第一個參數為注入名稱，以字串或是 Symbol 形式來撰寫，第二個參數為依賴值，其值可以為任意類型，而且一個元件可以多次使用 provide( ) 函數，運用在不同的注入名稱和依賴值。

以下是官方文件的範例 (Composition API)

<script setup>
    import { provide } from 'vue'
    provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
</script>

以下是官方文件的範例 (Options API)

export default {
  provide: {
    message: 'hello!'
  }
}

如何使用 inject( ) 函數？

在欲注入資料的元件中寫入 inject( ) 函數。

以下是官方文件的範例 (Composition API)

<script setup>
    import { inject } from 'vue'
    const message = inject('message')
</script>

以下是官方文件的範例 (Options API)

export default {
  inject: ['message'],
  created() {
    console.log(this.message) // injected value
  }
}

參考資源

https://book.vue.tw/CH2/2-2-communications.html
https://zh-hk.vuejs.org/guide/components/provide-inject.html